{% load i18n %}
{% block content %}
  <div style="margin: 15px;">
    <blockquote class="layui-elem-quote layui-text" style="border-left: 0 solid">
      {% trans 'system_operation_changePasswordHelpTxt' %}
    </blockquote>
    <form class="layui-form action-form" lay-filter="change_password" action="{{ form_url }}" method="post"
          id="user_changepassword_navbar">{% block form_top %}{% endblock %}
      <div>
        {% if is_popup %}<input type="hidden" name="_popup" value="1"/>{% endif %}
        {% if form.error_dict %}
          <p class="errornote">
            {% blocktrans count form.error_dict.items|length as counter %}Please correct the error below.{% plural %}
              Please correct the errors below.{% endblocktrans %}
          </p>
        {% endif %}


        {% csrf_token %}
        {% for field in form %}
          <div class="layui-form-item">
            <label for="{{ field.id_for_label }}" class="layui-form-label" style="width: 140px;">{{ field.label }}<span
              class="required">*</span></label>
            <div class="layui-input-inline">
              {{ field }}
            </div>
            {{ form.password_original.html_error_list }}
          </div>
        {% endfor %}
        {#<script type="text/javascript">document.getElementById("{{ first_form_field_id }}").focus();</script>#}
      </div>
    <div class="layui-card">
      <div class="layui-card-body">
        <div><span style="color: red">*</span><span>{% trans 'form_helpText_title' %}</span></div>
        <div style="padding: 0 20px;">
          <p>{% trans 'password_need_meet_strength_requirements' %}</p>
        </div>
      </div>
    </div>
    </form>
  </div>
  <script>
    layui.use(['form', 'laydate'], function () {
      var form = layui.form;
      var laydate = layui.laydate;
      $("form.layui-form input.layui-datetime").each(function () {
        laydate.render({elem: this, type: 'datetime'});
      });
      $("form.layui-form input.layui-date").each(function () {
        laydate.render({elem: this, type: 'date'});
      });
      $("form.layui-form input.layui-time").each(function () {
        laydate.render({elem: this, type: 'time'});
      });
      form.render();
    });
  </script>
{% endblock %}